import { Button, Table, Modal, message } from 'antd';
import { goodsList, goodsDelcate } from "../../../api/account";
import ContentTop from '../../../components/ContentTop';
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

export default function GoodsList() {
    const navigate = useNavigate();
    const [deleteRecord, setDeleteRecord] = useState(null);
    const [datasList, setDatasList] = useState([]);
    const [pagination, setPagination] = useState({ current: 1, pageSize: 5 });

    const columns = [
        {
            title: '商品名称',
            dataIndex: 'name',
        },
        {
            title: '商品分类',
            dataIndex: 'category',
        },
        {
            title: '商品价格',
            dataIndex: 'price',
        },
        {
            title: '商品图片',
            dataIndex: 'imgUrl',
            render: (imgUrl) => <img src={imgUrl} alt="商品图片" style={{ width: 50, height: 50 }} />,
        },
        {
            title: '商品描述',
            dataIndex: 'goodsDesc',
        },
        {
            title: '操作',
            dataIndex: 'active',
            render: (_, record) => (
                <span>
                    <Button type="primary" onClick={() => { toEditPage(record) }}>编辑</Button>
                    <Button
                        type="primary"
                        danger
                        style={{ marginLeft: 10 }}
                        onClick={() => {
                            setDeleteRecord(record);
                        }}
                    >
                        删除
                    </Button>
                </span>
            ),
        },
    ];

    const toEditPage = (record) => {
        navigate(`/goodsEdit?id=${record.key}`); // 使用查询参数形式
    }


    const handleDelete = async () => {
        if (deleteRecord) {
            let res = await goodsDelcate({ id: deleteRecord.key });
            if (res.data.code == 0) {
                message.success(res.data.msg);
                setDeleteRecord(null);
                fetchData(pagination.current, pagination.pageSize);
            }else{
                message.error(res.data.msg)
            }

        }
    };

    const handleTableChange = (newPagination) => {
        setPagination(newPagination);
        fetchData(newPagination.current, newPagination.pageSize);
    };

    const fetchData = async (currentPage, pageSize) => {
        const res = await goodsList({ currentPage, pageSize });
        setDatasList(res.data.data);
        setPagination((prevPagination) => ({
            ...prevPagination,
            total: res.data.total,
            pageSize,
        }));
    };

    useEffect(() => {
        fetchData(pagination.current, pagination.pageSize);
    }, []);

    const data = datasList.map((item) => ({
        key: item.id,
        name: item.name,
        category: item.category,
        price: item.price,
        imgUrl: "http://8.137.157.16:9002" + item.imgUrl,
        goodsDesc: item.goodsDesc,
    }));

    const defaultExpandable = {
        expandedRowRender: (record) => (
            <div style={{ width: '60%', display: 'flex', justifyContent: 'space-between' }}>
                <span>商品ID: {record.key}</span>
                <span>商品名: {record.name}</span>
            </div>
        ),
    };

    const [expandable] = useState(defaultExpandable);
    return (
        <>
            <div className="app-content">
                <ContentTop>
                    <div className="title">商品列表</div>
                </ContentTop>

                <div className="content-info">
                    <Table
                        expandable={expandable}
                        pagination={pagination}
                        onChange={handleTableChange}
                        rowKey={(record) => record.key}
                        columns={columns}
                        dataSource={data}
                        tableLayout='fixed'
                        style={{ width: '100%' }}
                    />
                </div>
                <Modal
                    title="确认删除"
                    visible={!!deleteRecord}
                    onOk={handleDelete}
                    onCancel={() => setDeleteRecord(null)}
                >
                    <p>您确定要删除这个商品吗？</p>
                </Modal>
            </div>

        </>
    );
}
